<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动常用场景1：图片与文字环绕</title>
		<style>
			img{
				/* 图片脱离文档流--文字包含在图片周边 */
				float: left;
				margin-right: 50px;/* 图片与文字链接处间隙 */
				margin-bottom: 50px;/* 图片与文字链接处间隙 */
			}
			p{
				font-size: 16px;/* 页面默认字体尺寸 */
				line-height: 20px;/* 浮动文字，行高无法设定 */
				word-spacing: 5px;
			}
		</style>
	</head>
	<body>
		<h1>浮动之文字环绕</h1>
		<img src="img/2.jpg" alt="xiaomi" width="250px" height="250px" >
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea ad voluptate enim dolore autem repellendus odio reiciendis ipsa. Perferendis quisquam deleniti repellendus repellat id qui veniam alias sapiente nisi architecto. Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius facilis laborum, maxime repudiandae exercitationem delectus doloremque. Sit magnam cupiditate molestias, omnis quas possimus maxime laboriosam illum ipsam odio reprehenderit odit?</p>
	</body>
</html>